<template>
    <van-tabbar class="nav-menu-01" fixed v-model="active">
        <van-tabbar-item :to="{path:'/know/knowList', replace:true}" >
            <i
            slot="icon"
            slot-scope="props"
            class="menu-icon-list tabIcon"></i>
            <!--问题列表-->
            <span>{{ $t("know_all") }}</span>
        </van-tabbar-item>
        <van-tabbar-item :to="{path:'/know/relatedToMe/myQuestion', replace:true}" >
            <i
            slot="icon"
            slot-scope="props"
            class="menu-icon-relatedMe tabIcon"></i>
            <!--与我相关-->
             <span>{{ $t("know_related_to_me") }}</span>
        </van-tabbar-item>
        <van-tabbar-item :to="{path:'/know/myHelpQuestion', replace:true}" >
            <i
            slot="icon"
            slot-scope="props"
            class="menu-icon-helpQuestion tabIcon"></i>
            <!--求助于我-->
            <span>{{ $t("know_help") }}</span>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script>
export default {
    name: 'BottomNav',
    data() {
        return {
            path: '',
            active: 0
        };
    },
    computed: {
        // 根据当前路由计算应该激活的TabBar项的索引
        activeIndex() {
            const paths = ['/know/knowList', '/know/relatedToMe/myQuestion', '/know/myHelpQuestion'];
            return paths.findIndex(path => this.$route.path.startsWith(path));
        }
    },
    mounted() {
        // this.path = this.$route.path;
        this.active = this.activeIndex;
    },
    watch: {
        // 监听路由变化，更新active属性
        '$route': {
            handler() {
                this.active = this.activeIndex;
            },
            immediate: true // 页面加载时立即执行
        }
    }
};
</script>

<style scoped>
    .menu-icon-list, .menu-icon-relatedMe, .menu-icon-helpQuestion {
        display: block;
        width: 100%;
        height: 100%;
        background: url(../../../static/images/icon-06.png) no-repeat 5px -87px;
        background-size: 19px;
    }
    .nav-menu-01 .weui-bar__item_on .menu-icon-list {
        background-position: 5px -58px;
    }
    .nav-menu-01 .van-tabbar-item--active .menu-icon-list {
        background-position: 5px -58px;
    }
    .menu-icon-relatedMe {
        background-position: 5px -147px;
    }
    .nav-menu-01 .weui-bar__item_on .menu-icon-relatedMe {
        background-position: 5px -118px;
    }
    .nav-menu-01 .van-tabbar-item--active .menu-icon-relatedMe {
        background-position: 5px -118px;
    }
    .menu-icon-helpQuestion {
        background-position: 5px -200px;
    }
    .nav-menu-01 .weui-bar__item_on .menu-icon-helpQuestion {
        background-position: 5px -174px;
    }
    .nav-menu-01 .van-tabbar-item--active .menu-icon-helpQuestion {
        background-position: 5px -174px;
    }
    .tabIcon{
        display: inline-block;
        width: 30px;
        height: 24px;
        text-align: center;
        line-height: 28px;
    }
</style>
